<template>
  <div class="pop-wrapper" :class="{'left':popLeft}">
    <el-popover placement="left" trigger="click" popper-class="s-popover" width="234">
      <div style="display:flex;align-items:center;justify-content:center;padding:20px 0;">
        <i :class="`el-icon-${iconName}`" style="font-size:26px;margin-right:10px" :style="{color:colorMap[iconName]}" />
        {{ POP_MSG }}
      </div>
      <div style="text-align: center; margin: 0">
        <el-button size="small" type="primary" plain @click="cancelEvent">取 消</el-button>
        <el-button type="primary" size="small" @click="submitEvent">确 认</el-button>
      </div>
      <el-button
        v-show="powerName===''?true:permissions[powerName]"
        slot="reference"
        type="text"
        size="small"
        :class="btnClassMap[iconName]"
      >{{ BTN_MSG }}</el-button>
    </el-popover>
  </div>
</template>

<script>
// 注意
// 表单内组件存在mounted和updated两个生命周期
// 最好使用computed
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {
    // 是否加margin
    popLeft: {
      type: Boolean,
      default: false
    },
    // 按钮权限名
    powerName: {
      type: String,
      default: ''
    },
    // 图标名
    iconName: {
      type: String,
      required: true,
      default: ''
    },
    // 提示语
    popMsg: {
      type: String,
      default: ''
    },
    // 按钮文字
    btnMsg: {
      type: String,
      required: true,
      default: ''
    }
  },

  data() {
    return {
      // 根据图标名选颜色
      colorMap: {
        question: '#e05e5e',
        warning: '#5fb09c'
      },
      btnClassMap: {
        question: 'samples-text-button-disabled',
        warning: 'samples-text-button-primary'
      }
    }
  },

  computed: {
    BTN_MSG() {
      // 根据按钮文字长度判断是否加空格
      if (this.btnMsg.length === 2) {
        return this.btnMsg.substring(0, 1) + ' ' + this.btnMsg.substring(1, 2)
      } else {
        return this.btnMsg
      }
    },
    POP_MSG() {
      // 根据是否传入展示文字是否进行自动补全
      if (this.popMsg === '') {
        return `确定${this.btnMsg}这条数据吗？`
      } else {
        return this.popMsg
      }
    },
    ...mapGetters(['permissions'])
  },

  mounted() {
    if (document.addEventListener) {
      // firefox
      document.addEventListener(
        'DOMMouseScroll',
        function() {
          document.querySelector('#app').click()
        },
        false
      )
    }
    // 滚动滑轮触发scrollFunc方法  //ie 谷歌
    window.onmousewheel = document.onmousewheel = function() {
      document.querySelector('#app').click()
    }
  },

  methods: {
    cancelEvent() {
      this.$emit('cancel')
      document.querySelector('#app').click()
    },
    submitEvent() {
      this.$emit('submit')
      document.querySelector('#app').click()
    }
  }
}
</script>
<style lang='scss' scoped>
.pop-wrapper {
  display: inline-block;
}
.pop-wrapper.left {
  margin-left: 15px;
}
</style>
